<script lang="ts" setup>
import { ref } from 'vue'
import { useTransition } from '@vueuse/core'
import { ChatLineRound, Male } from '@element-plus/icons-vue'
import { Swiper, SwiperSlide } from 'swiper/vue'

// Import Swiper styles
import 'swiper/css'
import 'swiper/css/pagination'
// import required modules
import { Pagination } from 'swiper/modules'
const modules = [Pagination]

const source = ref(0)
const outputValue = useTransition(source, {
  duration: 1500
})
source.value = 172000

const source1 = ref(0)
const outputValue1 = useTransition(source1, {
  duration: 1500
})
source1.value = 172000
</script>

<template>
  <div class="full-container">
    <el-card style="height: 100%; width: 100%">
      <template #header>
        <div class="demo-page-title">数据总览</div>
      </template>
      <swiper :pagination="true" :modules="modules" class="mySwiper">
        <swiper-slide>
          <img src="https://swiperjs.com/demos/images/nature-1.jpg" />
        </swiper-slide>
        <swiper-slide>
          <img src="https://swiperjs.com/demos/images/nature-2.jpg" />
        </swiper-slide>
        <swiper-slide>
          <img src="https://swiperjs.com/demos/images/nature-3.jpg" />
        </swiper-slide>
        <swiper-slide>
          <img src="https://swiperjs.com/demos/images/nature-4.jpg" />
        </swiper-slide>
      </swiper>
      <el-row style="margin-top: 24px">
        <el-col :span="6">
          <el-statistic :value="source">
            <template #title>
              <div style="display: inline-flex; align-items: center">
                <el-icon style="margin-left: 4px" :size="12">
                  <Male />
                </el-icon>
                用户总数
              </div>
            </template>
          </el-statistic>
        </el-col>
        <el-col :span="6">
          <el-statistic :value="138">
            <template #title>
              <div style="display: inline-flex; align-items: center">
                <el-icon style="margin-left: 4px" :size="12">
                  <Male />
                </el-icon>
                模板总数
              </div>
            </template>
          </el-statistic>
        </el-col>
        <el-col :span="6">
          <el-statistic :value="138">
            <template #title>
              <div style="display: inline-flex; align-items: center">
                <el-icon style="margin-left: 4px" :size="12">
                  <Male />
                </el-icon>
                已完成任务总数
              </div>
            </template>
          </el-statistic>
        </el-col>
        <el-col :span="6">
          <el-statistic :value="138">
            <template #title>
              <div style="display: inline-flex; align-items: center">
                <el-icon style="margin-left: 4px" :size="12">
                  <Male />
                </el-icon>
                失败任务总数
              </div>
            </template>
          </el-statistic>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<style scoped>
.el-col {
  text-align: center;
}
.demo-page-wrapper {
  height: 80vh;
}

.swiper {
  width: 100%;
  height: 400px;
  border-radius: 8px;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>
